<!-- 预警信息 已处理 -->
<template>
	<div>
		<el-row>
			<el-form :inline="true" :model="data.queryParams">
				<orgSelect @do-search="mergeSearchData" :show-build="false" :show-util="false" />

				<el-form-item label="预警类型">
					<el-select v-model="data.queryParams.eventType" placeholder="预警类型" size="default" style="width: 120px" clearable v-if="true">
						<el-option v-for="item in alarmTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item label="设备">
					<el-input v-model="data.queryParams.deviceCode" placeholder="设备编号" size="default" clearable style="width: 150px" />
				</el-form-item>

				<el-form-item label="时间">
					<el-date-picker
						v-model="data.timeRange"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="YYYY-MM-DD"
						style="width: 260px"
						size="default"
					/>
				</el-form-item>

				<el-form-item label="">
					<el-button type="primary" size="default" @click="search"> 搜索 </el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<el-table key="table" ref="table" :data="data.tableData.list" border fit style="width: 100%">
			<el-table-column align="center" type="index" width="70px" label="#" />

			<el-table-column label="报警图片" :show-overflow-tooltip="true" width="130px">
				<template #default="{ row }">
					<img class="alarmImg" :src="getFileUrl(row.url)" @click="viewDetail(row)" />
				</template>
			</el-table-column>

			<el-table-column label="事件ID" :show-overflow-tooltip="true" prop="eventId" />

			<el-table-column label="报警时间" :show-overflow-tooltip="true" prop="createdAt" />

			<el-table-column label="设备编号" :show-overflow-tooltip="true" prop="deviceCode" />
			<el-table-column label="处理方式" :show-overflow-tooltip="true" prop="handleType" >
				<template #default="{ row }">
					{{ handleType[row.handleType] }}
				</template>
			
			
			</el-table-column>
			<el-table-column label="处理备注" :show-overflow-tooltip="true" prop="handleRemark" />

			<el-table-column label="预警地址" :show-overflow-tooltip="true" prop="deviceAddress">
				<template #default="{ row }"> {{ getAddress(row) }} </template>
			</el-table-column>

			<el-table-column label="操作" :show-overflow-tooltip="true" prop="eventType">
				<template #default="{ row }">
					<el-button :type="row.eventType === 1 ? 'danger' : 'warning'" size="default" @click="viewDetail(row)"> 查看 </el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<pagination
			v-show="data.tableData.total > 0"
			:total="data.tableData.total"
			v-model:page="data.queryParams.pageNum"
			v-model:limit="data.queryParams.pageSize"
			@pagination="fetch"
		/>

		<alarmDialog
			v-if="data.dialogVisible"
			:dialog-visible="data.dialogVisible"
			:cur-alarm="data.curAlarmInfo"
			type="done"
			@close="closeDetialDialog"
		/>
	</div>
</template>

<script lang="ts" setup name="HandleAlarm">
import { useSmoke } from '/@/hook/index';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import orgSelect from '/@/components/smoke/orgSelect/index.vue';
import alarmDialog from '/@/components/smoke/globalAlarm/alarmDialog.vue';
import alarmApi from '/@/api/smoke/alarm';

import { smokeStore } from '/@/stores/smoke';
const { getAddress, getFileUrl } = useSmoke();

const emit = defineEmits(['change']);

const alarmTypeOptions = [
	{
		value: 1,
		label: '烟雾',
	},
	{
		value: 2,
		label: '人员停留',
	},
];
const map = {
	WAITING: 'danger',
	SUCCESS: 'success',
	FAIL: 'error',
};

// 处理类型
const handleType: any = {
	1: '人工处理',
	2: '忽略',
};

const data = reactive({
	//报警弹窗
	dialogVisible: false,
	curAlarmInfo: <any>{},

	timeRange: <any>[],
	queryParams: {
		ids: [],
		deviceCode: '',
		eventType: '', // 1:烟雾 2:人员停留
		isHandle: 2,
		startTime: '',
		endTime: '',
		pageNum: 1,
		pageSize: 10,
	},

	loading: false,

	// 待处理警告
	tableData: <any>{
		list: [],
		pagination: {
			total: 0,
		},
	},
});

onMounted(() => {
	// this.$store.commit("smoke/setShowMsgList", true);
	search();
});

function mergeSearchData(xqData: any) {
	const { ids, dept, communityId, buildNum, utilNum, communityIds } = xqData;
	Object.assign(data.queryParams, { ids, communityId, buildNum, utilNum, communityIds });
	search();
}

function search() {
	fetch(data.queryParams);
}

function fetch(params?: any) {
	data.loading = true;

	// 处理时间逻辑
	if (data.timeRange.length) {
		const [startTime, endTime] = data.timeRange;
		data.queryParams.startTime = startTime + ' 00:00:00';
		data.queryParams.endTime = endTime + ' 23:59:59';
	} else {
		data.queryParams.startTime = '';
		data.queryParams.endTime = '';
	}

	Object.assign(data.queryParams, params);

	alarmApi
		.page(data.queryParams)
		.then((res) => {
			data.tableData = res.data;
			data.loading = false;
		})
		.finally(() => (data.loading = false));
}

function viewDetail(row: any) {
	data.curAlarmInfo = row;
	data.dialogVisible = true;
}

function closeDetialDialog() {
	data.dialogVisible = false;
}
</script>
<style lang="scss" scoped>
.alarmImg {
	height: 50px;
}
</style>
